<template>
  <div v-if="visible" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <h2 class="modal-title">请上传本人真实的近期正面照</h2>
      
      <div class="photo-examples">
        <div class="photo-example">
          <div class="photo-container">
            <img src="/placeholder.svg?height=120&width=120" alt="五官清晰示例" class="example-img" />
            <div class="status-icon status-success">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>
            </div>
          </div>
          <p class="example-label">五官清晰</p>
        </div>
        
        <div class="photo-example">
          <div class="photo-container">
            <img src="/placeholder.svg?height=120&width=120" alt="面部遮挡示例" class="example-img" />
            <div class="status-icon status-error">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </div>
          </div>
          <p class="example-label">面部遮挡</p>
        </div>
        
        <div class="photo-example">
          <div class="photo-container">
            <img src="/placeholder.svg?height=120&width=120" alt="看不清脸示例" class="example-img" />
            <div class="status-icon status-error">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </div>
          </div>
          <p class="example-label">看不清脸</p>
        </div>
        
        <div class="photo-example">
          <div class="photo-container">
            <img src="/placeholder.svg?height=120&width=120" alt="非单人照示例" class="example-img" />
            <div class="status-icon status-error">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </div>
          </div>
          <p class="example-label">非单人照</p>
        </div>
      </div>
      
      <div class="action-buttons">
        <button class="action-button" @click="selectFromAlbum">从相册选取</button>
        <button class="action-button" @click="takePhoto">拍照</button>
        <button class="action-button cancel-button" @click="closeModal">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'select-photo', 'take-photo'])

const closeModal = () => {
  emit('close')
}

const selectFromAlbum = () => {
  emit('select-photo')
}

const takePhoto = () => {
  emit('take-photo')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 100%;
  background-color: white;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.photo-examples {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 32px;
}

.photo-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
}

.photo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.example-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status-icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-success {
  background-color: #4CAF50;
  color: white;
}

.status-error {
  background-color: #F44336;
  color: white;
}

.example-label {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.action-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-button {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.action-button:active {
  background-color: #e0e0e0;
}

.cancel-button {
  margin-top: 4px;
}
</style>